<script setup lang="ts">
import { ref } from 'vue'
import { adminGetManagementListService, adminUpdateDefaultPasswordService, adminUpdateStatusService } from '@/api/admin'
import { ElMessageBox } from 'element-plus'

enum StuStatus {
  '启用' = 1,
  '禁用' = 0
}

const studentData = ref([])

const searchForm = ref({
  currentPage: 1,
  pageSize: 20,
  stuId: '',
  username: '',
  gender: '',
  status: ''
})

const totalItems = ref(0)

const getManagementList = async () => {
  const res = await adminGetManagementListService(searchForm.value)
  studentData.value = res.data.data.records.map((item: any) => ({
    ...item,
    status: item.status === '1' ? '启用' : item.status === '0' ? '禁用' : '未知状态'
  }))
  totalItems.value = res.data.data.total
}

const resetSearchForm = () => {
  searchForm.value = {
    currentPage: 1,
    pageSize: 10,
    stuId: '',
    username: '',
    gender: '',
    status: ''
  }
}

const handlePageChange = (page: number) => {
  searchForm.value.currentPage = page
  getManagementList()
}

getManagementList()

const isShow = ref(false)

const highLevelSearch = () => {
  getManagementList()
  isShow.value = false
}

const toggleStatus = async (row: any) => {
  if (row.status === '启用') {
    await ElMessageBox.confirm('确认停用该账号吗?\n停用期间该学生无法登录此账号', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
  } else if (row.status === '禁用') {
    await ElMessageBox.confirm('确认启用该账号吗?', '提醒', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
  }
  console.log('id:' + row.id + ' ' + 'status:' + StuStatus[row.status])
  await adminUpdateStatusService(row.id, StuStatus[row.status])
  await ElMessage.success('操作成功')
  await getManagementList()
}

const resetPassword = async (row: any) => {
  await ElMessageBox.confirm('确认重置该账户的密码吗?', '提醒', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await adminUpdateDefaultPasswordService(row.id)
  await ElMessage.success('操作成功')
}
</script>

<template>
  <div id="main-teaManagementPage">
    <div class="search-area">
      <el-input v-model="searchForm.stuId" placeholder="学号" style="width: 200px"></el-input>
      <el-input v-model="searchForm.username" placeholder="姓名" style="width: 200px"></el-input>
      <el-button type="primary" @click="getManagementList">搜索</el-button>
      <el-button type="success" @click="isShow = true">高级搜索</el-button>
      <el-button type="warning" @click="resetSearchForm">重置</el-button>
    </div>
    <el-table height="70vh" border :data="studentData">
      <el-table-column sortable label="学号" prop="stuId"></el-table-column>
      <el-table-column sortable label="姓名" prop="username"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column sortable label="状态" prop="status"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="operate">
            <el-link
              :type="row.status === '禁用' ? 'success' : 'primary'"
              @click="toggleStatus(row)"
            >
              {{ row.status === '禁用' ? '启用' : '停用' }}
            </el-link>
            <el-link type="warning" @click="resetPassword(row)">密码重置</el-link>
            <el-link type="danger" @click="removeStudent(row)">移除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-area">
      <el-pagination
        :current-page="searchForm.currentPage"
        background
        layout="prev, pager, next, jumper"
        :page-size="searchForm.pageSize"
        :total="totalItems"
        @current-change="handlePageChange"
      />
    </div>
  </div>

  <el-dialog v-model="isShow" append-to-body width="400px">
    <h2 style="text-align: center">高级搜索</h2>
    <div class="dialog-area">
      <el-form style="margin-top: 20px">
        <el-form-item label="学号">
          <el-input v-model="searchForm.stuId" placeholder="学号" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="searchForm.username" placeholder="姓名" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="searchForm.gender" placeholder="性别" style="width: 100%">
            <el-option label="全部" value=""></el-option>
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号状态">
          <el-select v-model="searchForm.status" placeholder="账号状态" style="width: 100%">
            <el-option label="全部" value=""></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="resetSearchForm">重置</el-button>
      <el-button type="primary" @click="highLevelSearch">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
#main-teaManagementPage {
  padding: 20px;
}

.search-area {
  margin-bottom: 20px;
  width: 60%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-area {
  margin-top: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.operate {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.dialog-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
